<template>
  <div class="index">
    <header>
      <i class="iconfont icon-zuojiantou ip" @click="fun()"></i>
      <p class="ip">排行榜</p>
    </header>
    <nav>
      <ul>
        <li
          v-for="(v, i) in arr"
          :key="i"
          @click="red(i)"
          :class="{ ys: index == i }"
        >
          {{ v.vg }}
        </li>
      </ul>
    </nav>
    <div class="white">
      <dl>
        <div class="b">榜单推荐</div>
        <dt>
          <img
            src="http://p4.music.126.net/DrRIg6CrgDfVLEph9SNh7w==/18696095720518497.jpg?param=100y100"
          />
        </dt>
        <dd><span>云音乐飙升榜</span></dd>
      </dl>
      <dl>
        <dt>
          <img
            src="http://p4.music.126.net/N2HO5xfYEqyQ8q6oxCw8IQ==/18713687906568048.jpg?param=100y100"
          />
        </dt>
        <dd><span>云音乐新歌榜</span></dd>
      </dl>
      <dl>
        <dt>
          <img
            src="http://p4.music.126.net/sBzD11nforcuh1jdLSgX7g==/18740076185638788.jpg?param=100y100"
          />
        </dt>
        <dd><span>云音乐原创榜...</span></dd>
      </dl>
    </div>
    <Zj9 />
    <div class="song" v-for="(v, i) in arrtwo" :key="i" @click="funsong()">
      <div class="left">
        <p class="zise">{{ v.classname }}</p>
        <img :src="v.classpic" class="smallimg" />
      </div>
      <div class="content">
        <p class="ctp">
          1. <span>{{ v.songtitle }}</span> -
          <span>{{ v.singer }}</span>
        </p>
        <p class="ctp">
          2. <span>{{ v.songtitle }}</span
          >-<span>{{ v.singer }}</span>
        </p>
        <p class="ctp">
          3. <span>{{ v.songtitle }}</span> - <span>{{ v.singer }}</span>
        </p>
      </div>
      <div class="right">
        <p class="green">新</p>
        <p class="green">新</p>
        <p class="green">新</p>
      </div>
    </div>
    <!-- <div class="song2">
      <div class="left">
        <p class="zise">飙升榜</p>
        <img
          src="http://p4.music.126.net/pbZt4gUmcXjrW_tx_qRV7A==/109951166366107095.jpg?param=50y50&quality=100"
          class="smallimg"
        />
      </div>
      <div class="content">
        <p class="ctp">1. I ไม่ O (IXO) - Billkin</p>
        <p class="ctp">2.悟空-张淇/白举纲</p>
        <p class="ctp">3.飞云之下 - 刘迦/凌志炫/胡...</p>
      </div>
      <div class="right">
        <p class="green">新</p>
        <p class="green">新</p>
        <p class="green">新</p>
      </div>
    </div>
    <div class="song3">
      <div class="left">
        <p class="zise">飙升榜</p>
        <img
          src="http://p1.music.126.net/oT-RHuPBJiD7WMoU7WG5Rw==/109951166093489621.jpg?param=40y40"
          class="smallimg"
        />
      </div>
      <div class="content">
        <p class="ctp">1. I ไม่ O (IXO) - Billkin</p>
        <p class="ctp">2.悟空-张淇/白举纲</p>
        <p class="ctp">3.飞云之下 - 刘迦/凌志炫/胡...</p>
      </div>
      <div class="right">
        <p class="green">新</p>
        <p class="green">新</p>
        <p class="green">新</p>
      </div>
    </div>
    <div class="song4">
      <div class="left">
        <p class="zise">飙升榜</p>
        <img
          src="http://p1.music.126.net/KLVO8PxVZzOoLdWQQNyprA==/109951166327316568.jpg?param=40y40"
          class="smallimg"
        />
      </div>
      <div class="content">
        <p class="ctp">1. I ไม่ O (IXO) - Billkin</p>
        <p class="ctp">2.悟空-张淇/白举纲</p>
        <p class="ctp">3.飞云之下 - 刘迦/凌志炫/胡...</p>
      </div>
      <div class="right">
        <p class="green">新</p>
        <p class="green">新</p>
        <p class="green">新</p>
      </div>
    </div> -->
    <div class="white">
      <dl>
        <div class="b">榜单推荐</div>
        <dt>
          <img
            src="http://p4.music.126.net/DrRIg6CrgDfVLEph9SNh7w==/18696095720518497.jpg?param=100y100"
          />
        </dt>
        <dd><span>云音乐飙升榜</span></dd>
      </dl>
      <dl>
        <dt>
          <img
            src="http://p4.music.126.net/N2HO5xfYEqyQ8q6oxCw8IQ==/18713687906568048.jpg?param=100y100"
          />
        </dt>
        <dd><span>云音乐新歌榜</span></dd>
      </dl>
      <dl>
        <dt>
          <img
            src="http://p4.music.126.net/sBzD11nforcuh1jdLSgX7g==/18740076185638788.jpg?param=100y100"
          />
        </dt>
        <dd><span>云音乐原创榜...</span></dd>
      </dl>
    </div>
    <div class="white">
      <dl>
        <div class="b">榜单推荐</div>
        <dt>
          <img
            src="http://p4.music.126.net/DrRIg6CrgDfVLEph9SNh7w==/18696095720518497.jpg?param=100y100"
          />
        </dt>
        <dd><span>云音乐飙升榜</span></dd>
      </dl>
      <dl>
        <dt>
          <img
            src="http://p4.music.126.net/N2HO5xfYEqyQ8q6oxCw8IQ==/18713687906568048.jpg?param=100y100"
          />
        </dt>
        <dd><span>云音乐新歌榜</span></dd>
      </dl>
      <dl>
        <dt>
          <img
            src="http://p4.music.126.net/sBzD11nforcuh1jdLSgX7g==/18740076185638788.jpg?param=100y100"
          />
        </dt>
        <dd><span>云音乐原创榜...</span></dd>
      </dl>
    </div>
    <div class="white">
      <dl>
        <div class="b">榜单推荐</div>
        <dt>
          <img
            src="http://p4.music.126.net/DrRIg6CrgDfVLEph9SNh7w==/18696095720518497.jpg?param=100y100"
          />
        </dt>
        <dd><span>云音乐飙升榜</span></dd>
      </dl>
      <dl>
        <dt>
          <img
            src="http://p4.music.126.net/N2HO5xfYEqyQ8q6oxCw8IQ==/18713687906568048.jpg?param=100y100"
          />
        </dt>
        <dd><span>云音乐新歌榜</span></dd>
      </dl>
      <dl>
        <dt>
          <img
            src="http://p4.music.126.net/sBzD11nforcuh1jdLSgX7g==/18740076185638788.jpg?param=100y100"
          />
        </dt>
        <dd><span>云音乐原创榜...</span></dd>
      </dl>
    </div>
  </div>
</template>

<script>
import { getlink } from "@/api/getlink.js";
import Zj9 from "../zujian/wenzi/zujian9.vue";
export default {
  mounted() {
    getlink("http://43n31i8727.zicp.vip/class/findAll").then((ok) => {
      console.log(ok);
      this.arrtwo = ok.data.data;
      // console.log(this.arrtwo);
    });
  },
  components: { Zj9 },
  methods: {
    red(i) {
      this.index = i;
      console.log(this.index);
    },
    fun() {
      this.$router.push("/home");
    },
    funsong() {
      this.$router.push("/sa0");
    },
  },
  data() {
    return {
      arrtwo: [],
      index: "0",
      arr: [
        { vg: "官方" },
        { vg: "精选" },
        { vg: "曲风" },
        { vg: "全球" },
        { vg: "MV" },
        { vg: "特色" },
      ],
    };
  },
};
</script>
<style scoped>
.left {
  line-height: 1rem;
}
.content {
  line-height: 0.8rem;
}
.right {
  line-height: 0.8rem;
}
.green {
  color: rgb(100, 154, 99);
}
.zise {
  font-size: 0.3rem;
  color: rgb(232, 46, 119);
}
.smallimg {
  width: 1.2rem;
  height: 1.2rem;
}
.b {
  margin-top: -0.74rem;
  font-size: 0.4rem;
}
dl {
  margin-top: 1rem;
  line-height: 0.73rem;
}
img {
  width: 2rem;
  height: 2rem;
}
.song {
  width: 90%;
  height: 2.5rem;
  background-color: rgb(244, 225, 231);
  border-radius: 0.3rem;
  margin-left: 5%;
  margin-bottom: 0.2rem;
  display: flex;
  justify-content: space-evenly;
}
.song2 {
  width: 90%;
  height: 2.5rem;
  background-color: rgb(225, 235, 234);
  border-radius: 0.3rem;
  margin-left: 5%;
  margin-bottom: 0.2rem;
  display: flex;
  justify-content: space-evenly;
}
.song3 {
  width: 90%;
  height: 2.5rem;
  background-color: rgb(243, 225, 225);
  border-radius: 0.3rem;
  margin-left: 5%;
  margin-bottom: 0.2rem;
  display: flex;
  justify-content: space-evenly;
}
.song4 {
  width: 90%;
  height: 2.5rem;
  background-color: rgb(227, 231, 240);
  border-radius: 0.3rem;
  margin-left: 5%;
  margin-bottom: 0.2rem;
  display: flex;
  justify-content: space-evenly;
}
.white {
  width: 90%;
  height: 3.73rem;
  margin-left: 5%;
  background-color: white;
  border-radius: 0.3rem;
  margin-top: 0.3rem;
  margin-bottom: 0.3rem;
  display: flex;
  justify-content: space-evenly;
}
.ip {
  margin-top: 0.2rem;
  margin-left: 0.4rem;
}
.icon-zuojiantou {
  font-size: 0.5rem;
}
.index {
  background-color: rgb(245, 245, 245);
}
.ys {
  color: red;
  /* border-bottom: 1px solid; */
}

nav {
  overflow: auto;
}
header {
  display: flex;
  font-size: 0.35rem;
  height: 1rem;
}
li {
  width: 17%;
  overflow: auto;
  text-align: center;
  font-size: 0.3rem;
}
ul {
  display: flex;
  width: 116%;
  height: 0.8rem;
  line-height: 0.8rem;
  /* background-color: burlywood; */
}
</style>